<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>外卖</title>
    <style>
        #div1 {
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        #div2 {
            position: absolute;
            top: 48%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        table, tr, th, td {
            border: 1px solid #5fbdcb;
        }

        table {
            border-collapse: collapse;
        }
    </style>
</head>
<body>
<h1>欢迎您！</h1>
<div id="div1">
    <button id="information">查看自己的信息</button>
    <br>
</div>
<div id="div2">
    <a href="${pageContext.request.contextPath}/User/UserStorePage.jsp">进入店铺页</a><br>
    <a href="${pageContext.request.contextPath}/User/OwnOrderPage.jsp">订单</a><br>
    <a href="${pageContext.request.contextPath}/User/Cart.jsp">购物车</a><br>
    <a href="${pageContext.request.contextPath}/User/Thumb.jsp">点赞</a><br>
    <a href="${pageContext.request.contextPath}/User/Collect.jsp">收藏</a><br>
    <a href="${pageContext.request.contextPath}/User/UserCoupon.jsp">优惠券</a><br>
    <a href="${pageContext.request.contextPath}/User/UserDoComplaint.jsp">投诉</a><br>
    <button id="button" >退出</button>
</div>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
    $(function () {
        $('#information').on('click',function () {
            $.ajax({
                url: "http://localhost:8080/user.do",
                type: "post",
                data: {
                    method: 'selectUser'
                },
                dataType: "text",
                success: function (data) {
                    let parse = JSON.parse(data);
                    let div = document.querySelector('#div1');
                    let button = document.querySelector('#information');
                    let table = document.createElement('table');
                    div.appendChild(table);
                    let tr = document.createElement('tr');
                    table.appendChild(tr);
                    let th1 = document.createElement('th');
                    th1.innerText = '用户名：';
                    tr.appendChild(th1);
                    let td1 =document.createElement('td');
                    td1.innerText = parse.userName;
                    tr.appendChild(td1);
                    let th2 = document.createElement('th');
                    th2.innerText = '邮箱：';
                    tr.appendChild(th2);
                    let td2 =document.createElement('td');
                    td2.innerText = parse.email;
                    tr.appendChild(td2);
                    let th3 = document.createElement('th');
                    th3.innerText = '余额：';
                    tr.appendChild(th3);
                    let td3 =document.createElement('td');
                    td3.innerText = parse.balance;
                    tr.appendChild(td3);
                    div.removeChild(button);
                    let a = document.createElement('a');
                    a.innerText = '充值';
                    a.href = 'Recharge.jsp';
                    div.appendChild(a);
                }
            })
        })
        $('#button').on('click', function () {
            $.ajax({
                url: "http://localhost:8080/user.do",
                type: "post",
                data: {
                    method: 'logout'
                },
                dataType: "text",
                success: function (data) {
                    if (data==="ok"){
                        window.location.href = '../Login.jsp';
                    }else {
                        alert("系统出错!");
                    }
                }
            })
        })
    })
</script>
</body>
</html>
